import React,{useState} from 'react'
import './swipersearch.css'

interface SearchHistoryItem {
  id: number;
  query: string;
}


const Swipersearch: React.FC = () => {

        const [isshow,setisshow]=useState(false)
         const [isclass,setisclass]=useState(false)
      const [query, setQuery] = useState<string>(''); // 当前搜索词
  const [history, setHistory] = useState<SearchHistoryItem[]>([]); // 搜索历史记录

  // 处理搜索输入变化
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setQuery(e.target.value);

  };

  // 处理搜索提交
  const handleSearch = () => {
     setisshow(true)
    if (query.trim() === '') return;

    // 更新搜索历史记录
    setHistory(prevHistory => [
      ...prevHistory,
      { id: Date.now(), query }
    ]);

 

    // 清空搜索框
    setQuery('');
  };

  // 处理历史记录点击
  const handleHistoryClick = (query: string) => {
    setQuery(query);
  };


   // 搜索框获焦事件
    const handlerfocus=()=>{
         setisshow(true)
    }
    // 搜索框失焦事件
    const handlerBlur=()=>{
          setisshow(false)
    }

// 显示全部分类二级菜单
const handshow=()=>{
    setisclass(!isclass)
}


  return (
    <div className='boxsearch'>
        <div className='ser-classification' onClick={handshow}>全部分类<span className='iconfont icon-hx_xxiajiantou'></span>

            {/* 全部分类二级菜单 */}
        {isclass ?  <div className='classification-menu'>
            <ul>
                <li>全部分类</li>
                <li>摄影图</li>
                <li>视频</li>
                <li>音频</li>
                <li>PPT模版</li>
            </ul>
        </div> :''}

        
        </div>
        <div className='ser-inp'><input type="text" placeholder='新增东方人像,点击搜索立即使用' value={query} onChange={handleChange} onFocus={handlerfocus} onBlur={handlerBlur}/> <span className='iconfont icon-xiangji'></span></div>
        <div className='ser-btn'><button onClick={handleSearch}><span className='iconfont icon-sousuo'></span>搜索</button></div>

        {isshow ?      <div className='ser-history'>
        <h3>搜索历史:</h3>
        <ul>
          {history.map(item => (
            <li key={item.id} onClick={() => handleHistoryClick(item.query)}>
              {item.query}
            </li>
          ))}
        </ul>
      </div> :''}


    </div>
    
  )
}

export default Swipersearch
